<template v-if="layoutMode">
  <a-layout v-if="layoutMode === 'full-screen'" class="app-layout">
    <router-view />
  </a-layout>
  <a-layout v-else-if="layoutMode === 'layout'" class="app-layout">
    <a-layout-header class="header">
      <Header />
    </a-layout-header>
    <a-layout class="body">
      <a-layout-sider class="sider" width="300">
        <left-menu class="left-menu" />
      </a-layout-sider>
      <a-layout class="content-wrapper">
        <a-layout-content class="content">
          <router-view />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>

<script lang="ts">
  import { defineComponent, provide, watch, ref } from 'vue';
  import { useRoute } from 'vue-router';
  import leftMenu from '@/components/left-menu/index.vue';
  import Header from '@/components/header/index.vue';
  import config from './site-config';

  export default defineComponent({
    name: 'App',
    components: { leftMenu, Header },
    setup() {
      const layoutMode = ref('');
      const route = useRoute();
      watch(
        () => route.name,
        (val) => {
          if (val === 'Preview' || val === 'PackageFull' || val === 'PreviewList') {
            layoutMode.value = 'full-screen';
          } else {
            layoutMode.value = 'layout';
          }
        }
      );
      provide('config', config);
      return {
        collapsed: false,
        layoutMode,
      };
    },
  });
</script>

<style lang="less">
  html {
    border-radius: 36px;
  }
  body {
    border-radius: 36px;
    background: transparent !important;
    color: #000000d9;
    overflow-y: scroll;
    h1 {
      font-weight: bold;
    }
    h2,
    h3,
    h4,
    h5 {
      font-weight: bold;
      margin-top: 16px;
    }
  }
  .app-layout {
    .header {
      position: fixed;
      width: 100%;
      height: 64px;
      padding-left: 24px;
      z-index: 2;
      background: #fff;
      box-shadow: 0 2px 8px #f0f1f2;
    }
    .body {
      padding-top: 64px;
      min-height: calc(100vh - 64px);
      .sider {
        position: fixed;
        z-index: 1;
        background: #fff;
        height: calc(100vh - 64px);
        border-right: 1px solid #f0f0f0;
        overflow-y: auto;
        .left-menu {
          padding-bottom: 24px;
        }
      }
      .content-wrapper {
        padding-left: 300px;
      }
      .content {
        background: #fff;
        padding: 24px;
      }
    }
  }
  .ant-layout {
    background: transparent !important;
  }
</style>
